<template>
  <div class="dongtai">
    <!-- 版心 -->
    <div class="content">
      <!-- 第一层 -->
      <div>
        <router-link to="/">首页</router-link> -
        <span style="color: #fbb957">关于我们</span>
      </div>
      <!-- 第二层内容 -->
      <div class="f2">
        <!-- 左边导航菜单 -->
        <div class="nav">
          <p>关于众信</p>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            @select="handleSelect"
          >
            <el-menu-item index="1">众信动态</el-menu-item>
            <el-menu-item index="2">商务合作</el-menu-item>
            <el-menu-item index="3">消息中心</el-menu-item>
            <el-menu-item index="4">订单管理</el-menu-item>
          </el-menu>
        </div>
        <!-- 右边内容 -->
        <div class="right">
          <img src="../assets/imgs/zxdt_z.png" alt="" />
          <!-- 引入组件 -->
          <dongdai-cell v-for="n in 5" :key="n" />
          <!-- 分页 -->
          <div class="pagination">
            <span @click="now--" :class="{ disabled: now == 1 }">上一页</span>
            <span
              :class="{ active: now == n }"
              @click="now = n"
              v-for="n in 18"
              :key="n"
              >{{ n }}</span
            >
            <span @click="now++" :class="{ disabled: now == 18 }">下一页</span>
          </div>

          <!-- <el-pagination background layout="prev, pager, next" :total="20">
          </el-pagination> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DongdaiCell from "@/components/DongdaiCell.vue";
export default {
  components: { DongdaiCell },
  data() {
    return {
      activeIndex: "1",
      now: 1,
    };
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
}
.dongtai {
  background-color: #f7f7f7;
}
.content {
  width: 1142px;
  margin: 0 auto;
}
.f2 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.nav {
  margin-top: 10px;
  > p {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    padding-left: 20px;
    border-left: 4px solid #fbb957;
  }
}
.el-menu-demo {
  width: 168px;
  background-color: white;
  border: none;
  // text-align: center;

  > .el-menu-item {
    height: 34px;
    line-height: 34px;
    margin-bottom: 3px;

    &:hover {
      background-color: #fbb957;
      color: white;
    }
  }

  > .is-active {
    background-color: #fbb957;
    color: white;
  }
}
.right {
  width: 950px;
  margin-left: 20px;
  padding-bottom: 90px;
  background-color: #fff;
  // border: 1px solid red;
  position: relative;

  > img {
    width: 96px;
    height: 26px;
    background-size: contain;
    margin: 40px 0 0 60px;
  }

  > .pagination {
    position: absolute;
    right: 60px;
    bottom: 40px;

    > span {
      font-size: 12px;
      cursor: pointer;
      padding: 3px 8px;
      background: #fff;
      margin-right: 4px;
      user-select: none;
      border: 1px solid #ddd;
      color: #aaa;

      &.active {
        background-color: #fbb957;
      }

      &.disabled {
        pointer-events: none;
        color: #ccc;
        border-color: #bbb;
      }
    }
  }
}
</style>
